<template>
	<view>
		<view class="content">
			<view class="item1">
				<view class="title1">1.反馈的业务</view>
				<view class='box'>
					<view style="position: relative;"  v-for="(item, index) in list" :key="index"  @click="selectItems(item,index)">
						<view class="row" :class="{'itemActive':selectItem === index}">
							<view>{{item}}</view>
							<view class='icon-box' :class="{'icon-itemActive':selectItem === index}">
								<view class='icon' >
									<u-icon name="checkbox-mark" color="#ffffff" size="8"></u-icon>
								</view>
								
							</view>
						</view>
					    
					</view>
					<!-- <u-radio-group v-model="selType" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in list" :key="index"
							activeColor="#009B01" :label="item" :name="item" @change="radioChange">
						</u-radio>
					</u-radio-group> -->
				</view>

			</view>

			<view class="item1">
				<view class="title1">2.反馈内容<text style="color:#FF6A15 ">*</text></view>

				<view class="input-bg">
					<u--textarea v-model="remark" placeholder="请输入不少于5个字的描述，也可以上传相关页面截图有助于问题更快的解决..." :count='false'>
					</u--textarea>
				</view>

				<view>
					<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="6"></u-upload>
				</view>

			</view>

			<view class="item1">
				<view class="title1">3.反馈人信息<text style="color:#FF6A15 ">*</text></view>
				<view class='phone-stl'>
					<text>联系方式</text>
					<u-input v-model="phone" type="number" inputAlign="left" placeholder="请输入可以联系到您的手机号" border="bottom"
						clearable maxlength="11">
					</u-input>
				</view>
			</view>

			<view class="bottom"@click="btnClick">提交</view>
		</view>

		

	</view>
</template>

<script>
	import {
		sysfeedbacksubmit,
		uploadfiles
	} from '../../../common/api.js';

	export default {
		data() {
			return {
				// list: ['经租', '直购', '以租代购', '融租', '其他'],
				list: ['经租', '以租代购', '其他'],
				selType: '经租',
				textareaValue: '',
				fileList5: [],
				phone: '',
				remark: '',
				selectItem:0,
			}
		},
		methods: {
			selectItems(item,index){
				console.log(item,'itemitemitem')
				console.log(index,'indexindexindexindex')
				this.selectItem = index
				this.selType = item
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uploadfiles({
						name: 'file',
						filePath: url,
					}).then(res => {
						// setTimeout(()=>{
							resolve(res)
						// }, 1000)
					})
				})


				// return new Promise((resolve, reject) => {
				// 	let a = uni.uploadFile({
				// 		url: '', // 仅为示例，非真实的接口地址
				// 		filePath: url,
				// 		name: 'file',
				// 		formData: {
				// 			user: 'test'
				// 		},
				// 		success: (res) => {
				// 			setTimeout(() => {
				// 				resolve(res.data.data)
				// 			}, 1000)
				// 		}
				// 	});
				// })

			},

			btnClick() {

				if (uni.$u.test.isEmpty(this.remark)) {
					uni.showToast({
						icon: 'none',
						title: '请输入反馈内容',
					})
					return false;
				}

				if (this.remark.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '请输入不少于5个字的描述'
					})
					return false;
				}

				if (!uni.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					})
					return false;
				}

				console.log('数组', this.fileList5);

				let index = this.list.indexOf(this.selType) + 1;
				let fbType = ''
				if(index==1){
					fbType = 1
				}else if(index==2){
					fbType = 3
				}else if(index==3){
					fbType = 5
				}
				var pictures = '';
				if (this.fileList5.length > 0) {
					pictures = this.fileList5.map(item=>{
						return item.url = item.url
					}).join(',')
				}


				sysfeedbacksubmit({
					fbType: fbType,
					feedbackContent: this.remark,
					pictures: pictures,
					phone: this.phone
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功',
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}



		}
	}
</script>
<style>
	.u-textarea{
		background-color: #F8F8F8 !important;
	}
</style>
<style lang="scss" scoped>
	.icon-itemActive{
		position: absolute;
		bottom: 0;
		right: 0;
		width:48upx;
		height: 48upx;
		background: linear-gradient(315deg, #173B42 , #173B42  50%, transparent 50%, transparent 100%) !important;
	}
	.itemActive {
	    border: 1px solid #173B42;
	    color:#173B42 !important;
		background-color: #ffffff !important;
	}
	.content {
		margin: 32upx;
		.item1{
			padding: 32upx;
			background-color: #ffffff;
			border-radius: 8upx;
			margin-bottom: 24upx;
			.title1{
				color:#000000;
				font-size: 32upx;
				font-weight: bold;
				margin-bottom: 32upx;
				
			}
			.phone-stl{
				display: flex;
				justify-content:flex-start;
				align-items: center;
				text{
					font-size: 28upx;
					color:#666666;
					margin-right: 32upx;
				}
			}
			.input-bg{
				margin-bottom:24upx;
			}
		}

	}

	.bottom {
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: $redec;
		border-radius: 8upx;
		color:#ffffff;
		font-size: 32upx;
		margin-top:100upx;
		margin-bottom: 36upx;;
	}
	.box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.row {
		padding:12upx 48upx  ;
	    border-radius: 8upx;
	    font-size: 28upx;
		margin-bottom: 16upx;
		background-color:#F7FAFC;
		color:#000000;
		margin-right: 12upx;
		position: relative;
		.span1{
			display: flex;
			justify-content: start;
			margin-bottom:8upx ;
			.span1-text{
				margin-right: 24upx;
			}
		}
		.icon-box{
			position: absolute;
			bottom: 0;
			right: 0;
			width:32upx;
			height: 32upx;
			background:linear-gradient(315deg, #D6DCE0  , #D6DCE0   50%, transparent 50%, transparent 100%) ;
			.icon{
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
		}
	}
</style>
